
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" th:href="@{/assets/css/colorbox.css}" />
<link rel="stylesheet" th:href="@{/assets/css/chosen.css}" />
<head th:include="fragments/head::header" />
<style>
    .error {
        color: #F00
    }

    .optionNew{color:black !important}
</style>
<body>
<div th:include="fragments/top::top"></div>
<div class="main-container" id="main-container">
    <div class="main-container-inner">
        <div th:include="fragments/left::left" class="sidebar" id="sidebar"></div>
        <div class="main-content">
            <div class="breadcrumbs" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li><a>学生列表</a></li>
                    <li><a>材料清单</a></li>
                </ul>
            </div>

            <div class="page-content">
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div class="row">
                            <div class="col-xs-12">
                                <h3 class="header smaller lighter blue">材料清单</h3>
                                <div class="table-header">
                                    <input type="hidden" id="papersTypeNow"/>
                                    <form class="form-inline">
                                        <input type="hidden" name="studentNo" id="studentNo" th:value="${#httpServletRequest.getParameter('studentNo')}"/>
                                        <input type="hidden" name="countryId" id="countryId" th:value="${countryId}"/>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label no-padding-right" for="papersType" style="width:100px;">材料阶段：</label>
                                            <select type="" class="col-sm-1 chosen-select" id="papersType" data-placeholder="请选择" style="color:   yellow;background-color:   blue;width:100px;" onchange="changeTable()">
                                            <option value="-1" class='optionNew'>请选择</option>
                                            <option value="1" class='optionNew'>申请材料</option>
                                            <option value="2" class='optionNew'>签证材料</option>
                                            </select>
                                            <label class="col-sm-2 control-label no-padding-right" for="papersId" style="width:100px;">证件名称：</label>
                                            <select type="" class="col-sm-1 chosen-select" id="papersId" data-placeholder="请选择" style="color:   yellow;background-color:   blue;width:100px;" onchange="changeTable()">
                                                <option value="-1">请选择</option>
                                            </select>
                                        </div>
                                        <button type="button" id="query" class="btn btn-success pull-right">查询</button>
                                        <button type="reset" class="btn btn-warning pull-right">清空</button>
                                        <button type="reset" onclick="downLoadFiles()" class="	btn btn-danger pull-right">打包下载</button>
                                    </form>
                                </div>

                                <div class="table-responsive">
                                    <div id="alert" class="alert alert-success" style="display: none;" role="alert">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        <span id="alertText"></span>
                                    </div>
                                    <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <!--<th class="hide">id</th>-->
                                            <th>材料阶段</th>
                                            <th>材料类型</th>
                                            <th>材料名称</th>
                                            <th>上传时间</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.page-content -->
        </div>

        <div th:include="fragments/bottom::bottom"></div>
    </div>

    <a href="#" id="btn-scroll-up"
       class="btn-scroll-up btn btn-sm btn-inverse"> <i
            class="icon-double-angle-up icon-only bigger-110"></i>
    </a>
</div>
<!-- /.main-container -->

<!-- Modal备注 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content"></div>
    </div>
</div>
<!--<div th:include="fragments/js::js"></div>-->
<script type="text/javascript" th:src="@{/assets/js/jquery-2.0.3.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/jquery-1.10.2.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/jquery-1.10.2.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/jquery.mobile.custom.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/typeahead-bs2.min.js}"></script>

<script th:src="@{/assets/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/assets/js/jquery.dataTables.bootstrap.js}"></script>
<script th:src="@{/assets/js/temp.js}" charset="UTF-8"></script>
<script th:src="@{/My97DatePicker/WdatePicker.js}"></script>
<script th:src="@{/assets/js/jquery.form.js}"></script>
<script th:src="@{/assets/js/chosen.jquery.min.js}"></script>
<script th:src="@{/js/upload/upload.js}"></script>
<!--图片查看器-->
<script th:src="@{/assets/js/jquery.colorbox-min.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script type="text/javascript"></script>
<script>
    <!--
    $(".chosen-select").chosen();
    $("select[id ^= 'papersType']").attr(style="color: black");
    var countryId = $("#countryId").val();
    var papersType = $("#papersTypeNow").val();
    var oTable1;
    jQuery(function($) {
        oTable1 = $('#sample-table-2').dataTable({
            "bFilter" : false,//是否使用搜索
            "bProcessing" : true,
            "bDeferRender" : true,//
            "sPaginationType" : "bs_normal",//分页样式
            "bRetrieve" : true,//是否调用后台
            "bServerSide" : true,//是否以后台分页
            "sAjaxSource" : "/material/list",//请求路径
            "fnServerData" : function(sSource, aoData, fnCallback) {
                aoData.push(
                    {"name": "studentNo", value: $("#studentNo").val() == "" ? null : $.trim($("#studentNo").val())},
                    {"name":"papersType","value":$("#papersType").find("option:selected").val() == "" ? null : $("#papersType").find("option:selected").val()},
                    {"name":"papersId","value":$("#papersId").find("option:selected").val() == "" ? null : $("#papersId").find("option:selected").val()}
                )
                $.ajax({
                    "dataType" : 'json',
                    "type" : "GET",
                    "url" : sSource,
                    "data" : aoData,
                    "success" : fnCallback
                });
            },
            "aaSorting" : [ [ 0, "desc" ] ],
            "bSort":true,
            "aoColumns" : [
                {"sClass": "center", "bSortable": false, "mData":
                    function (data) {
                        if (data.papersType == 1) {
                            return "申请材料";
                        } else if (data.papersType == 2) {
                            return "签证材料";
                        } else {
                            return "";
                        }

                    }},
                {"sClass": "center", "bSortable": false,"mData": "papersName"},
                {"sClass": "center", "bSortable": false, "mData":
                    function (data) {
                        if (data.fileName != null && data.url != null) {
                            return '<a class="blue" href="' + data.url + '">' + data.fileName + '</a>';
                        }
                        return "";
                    }},
                {"sClass": "center", "bSortable": false, "mData":
                    function (data) {
                        if (data.createTime != null) {
                            return getTimeString_day(new Date(data.createTime))
                        } else {
                            return "";
                        }
                    }}
            ],
            "oLanguage" : {
                "sLengthMenu" : "每页 _MENU_条 ",
                "sZeroRecords" : "对不起，查询不到任何相关数据",
                "sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录 ",
                "sInfoEmpty" : "显示 0 到 0 条，共 0 条记录",
                "sInfoFiltered" : "数据表中共为 _MAX_ 条记录)",
                "sProcessing" : "正在加载中...",
                "sSearch" : "搜索",
                "sUrl" : "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
                "oPaginate" : {
                    "sFirst" : "第一页",
                    "sPrevious" : " 上一页 ",
                    "sNext" : " 下一页 ",
                    "sLast" : " 最后一页 "
                }
            }
            //多语言配置

        });


        $("#query").click(function() {
            oTable1.fnDraw();
        })

    })

    $("#papersType").change(function(){
        $("#papersTypeNow").val($("#papersType").find("option:selected").val());

    });
    $("#papersTypeNow").val($("#papersType").find("option:selected").val());

    $("select[id ^= 'papersType']").change(function () {
        var papersType = $(this).val();
        if(papersType == "-1"){
            $("#papersId").empty().append($("<option value='-1' class='optionNew'>请选择</option>"));
            $("#papersId").trigger("chosen:updated");
            return;
        }


        $.post("/materialList/getPapersId", {"countryId": countryId, "papersType": papersType}, function (data, status) {
            $("#papersId").empty();
            $("#papersId").append($("<option value='-1' class='optionNew'>请选择</option>"));
            $.each(data, function (index, item) {

                $("#papersId").append($("<option value=" + item.id + " class='optionNew'>" + item.papersName + "</option>"));
            });
            $(".chosen-select").trigger("chosen:updated");
        });
    });

    function getTimeString_day(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m >= 10 ? m : '0' + m;
        var d = date.getDate();
        d = d >= 10 ? d : '0' + d;
        return y + '-' + m + '-' + d;
    }

    function changeTable(){
        oTable1.fnDraw();
    }
    
    function downLoadFiles() {
        window.location.href="download/zip?zipName="+"材料清单.zip";
    }
    
    
    -->
</script>
</body>
</html>
